<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <style>
        div {
            width: 80%;
            margin: 50px auto;
        }
        
        img {
            width: 100%;
        }
    </style>

</head>

<body>
    <div>
        <img src="../imgs/a1.png" alt="图片" id="img_">
    </div>

    <script>
        // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
        // 1. 获取 img 标签
        //var img = document.getElementById("img").src = "../imgs/a2.png";
        var img = document.getElementById("img_").src = "../imgs/a" + window.setInterval(changeImageSrc2, 1000) + ".png";
        // alert(img);

        // 定义一个变量
        var count = 1;

        // 1.2 定义一个函数
        function changeImageSrc() {
            count++;
            img.scr = "../imgs/a" + count + ".png";
            if (count == 3) {
                count = 1;
            }
        }

        function changeImageSrc2() {
            count++;
            //img.scr = "../imgs/a" + count + ".png";
            if (count == 3) {
                count = 1;
            }
            return count;
        }


        // 2. 循环切换图片
        // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
        // 调用方式一 :
        //window.setInterval("changeImageSrc2()", 1000);
        // 调用方式二 :
        window.setInterval(changeImageSrc2, 1000);
    </script>
</body>

</html>